<template>
  <div class="page-container">
    <div class="page-layout">
      <!-- 左侧二级导航栏 -->
      <aside class="sidebar">
        <div class="sidebar-title">
          <span class="icon-news"></span> 新闻传媒
        </div>
        <ul class="sidebar-menu">
          <li v-for="category in newsCategories" :key="category.id">
            <router-link 
              :to="`/news/${category.path}`" 
              :class="{ 'active': currentCategory === category.path }">
              {{ category.name }}
            </router-link>
          </li>
        </ul>
      </aside>
      
      <!-- 右侧主内容区 -->
      <main class="main-content">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-bar">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>新闻传媒</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentCategory">{{ getCategoryName(currentCategory) }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="main-body">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
interface Article {
  id: number
  title: string
  slug: string
  // add other fields if needed
}
const articles = ref<Article[]>([])

onMounted(async () => {
  // 获取新闻列表
  const res = await axios.get('/api/news/')
  articles.value = res.data
})

// 当前新闻分类
const currentCategory = computed(() => {
  const segments = route.path.split('/');
  return segments.length > 2 ? segments[2] : '';
});

const newsCategories = [
  { id: 1, name: '视频中心', path: 'video' },
  { id: 2, name: '行业新闻', path: 'industry' },
  { id: 3, name: '企业新闻', path: 'company' },
  { id: 4, name: '内部专区', path: 'internal' }
];

function getCategoryName(path: string) {
  const category = newsCategories.find(cat => cat.path === path);
  return category ? category.name : '全部新闻';
}
</script>

<style lang="scss" scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-layout {
  display: flex;
  gap: 20px;
  @media (max-width: 768px) { flex-direction: column; }
}
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fafafa;
  border-radius: 6px;
  padding: 20px 0 10px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  .sidebar-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin: 0 0 15px 30px;
    display: flex;
    align-items: center;
    .icon-news {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('/src/assets/images/news-icon.png') no-repeat center/contain;
      margin-right: 8px;
    }
  }
  .sidebar-menu {
    list-style: none;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    li {
      a, .router-link-active {
        display: block;
        padding: 10px 30px;
        color: #333;
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: all 0.2s;
        font-size: 15px;
      }
      a.active, .router-link-active {
        color: #ff6b9d;
        background: #fff2f6;
        border-left: 3px solid #ff6b9d;
        font-weight: bold;
      }
      a:hover {
        color: #ff6b9d;
        background: #fff2f6;
      }
    }
  }
}
.main-content {
  flex: 1;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 0 0 30px 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  .breadcrumb-bar {
    padding: 20px 30px 0 30px;
    background: none;
    margin-bottom: 0;
  }
  .main-body {
    padding: 0 30px;
  }
}
</style>